<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="root"></div>
</body>
<script>

    const app = Vue.createApp({
        
        data() {
            return {
                message: 'hello world'
            }
        },
        // 实例生成前 自动执行的函数
        beforeCreate() {
            console.log('beforeCreate')
        },  
        // 胜利生成后 自动执行的函数
        created() {
            console.log('created')
        },  
        // 模板变成函数前 自动执行的函数
        beforeMount() {
            console.log('beforeMount')
        },   
        // 组件内容被渲染到页面之后自动执行的函数
        mounted() {
            console.log(document.getElementById('root').innerHTML,'mounted')
        },
        // data中的数据发生变化时自动执行的函数
        beforeUpdate() {
            console.log(document.getElementById('root').innerHTML,'beforeUpdate')
        },
        // data中的函数发生变化， 同时页面完成更新后 自动执行的函数
        updated() {
            console.log(document.getElementById('root').innerHTML,'updated')
        },
        // 当vue 应用失效时 自动执行的函数   .unmount()
        beforeUnmount() {
            console.log(document.getElementById('root').innerHTML,'beforeUnmount')
        },
        // 当vue应用失效后 自动执行的函数
        unmounted() {
            console.log(document.getElementById('root').innerHTML,'unmounted')
        },

        template: `
        <div>{{message}}</div>
        `
    })
    
    const vm = app.mount('#root');

</script>
</html>